<template>
    <div
        :class="{fullscreen:fullscreen}"
        class="tinymce-container"
        :style="{width:'750px'}"
    >
        <textarea
            :id="tinymceId"
            class="tinymce-textarea"
        />
        <!-- <div class="editor-custom-btn-container">
            <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
        </div> -->
    </div>
</template>




<script>
/**
 * docs:
 * https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce
 */
import editorImage from "./components/EditorImage";
import plugins from "./plugins";
import toolbar from "./toolbar";
import load from "./dynamicLoadScript";
import emitter from "element-ui/src/mixins/emitter"

// why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one

const tinymceCDN =
    "https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js";






export default {
    mixins: [emitter],
    name: "Tinymce",
    components: { editorImage },
    // props:{
    // valeu:{
    //     type:Boolean,
    //     default:false
    // }
    // },
    model: {
        prop: 'tinymceVal',
        event: 'input'
    },
    props: {
        id: {
            type: String,
            default: function () {
                return (
                    "vue-tinymce-" +
                    +new Date() +
                    ((Math.random() * 1000).toFixed(0) + "")
                );
            },
        },
        tinymceVal: {
            type: String,
            default: "",
        },
        toolbar: {
            type: Array,
            required: false,
            default () {
                return [];
            },
        },
        menubar: {
            type: String,
            default: "file edit insert view format table",
        },
        height: {
            type: [Number, String],
            required: false,
            default: 360,
        },
        width: {
            type: [Number, String],
            required: false,
            default: "auto",
        },
    },
    data () {
        return {
            hasChange: false,
            hasInit: false,
            tinymceId: this.id,
            fullscreen: false,
            languageTypeList: {
                en: "en",
                zh: "zh_CN",
                es: "es_MX",
                ja: "ja",
            },
            timer: "",
        };
    },
    computed: {
        containerWidth () {
            const width = this.width;
            if (/^[\d]+(\.[\d]+)?$/.test(width)) {
                // matches `100`, `'100'`
                return `${width}px`;
            }
            console.log(width);
            return width;
        },
    },
    watch: {
        tinymceVal (val) {
            if (!this.hasChange && this.hasInit) {
                this.$nextTick(() =>
                    window.tinymce.get(this.tinymceId).setContent(val || "")
                );
            }
        },
    },
    mounted () {
        this.init();
    },
    activated () {
        if (window.tinymce) {
            this.initTinymce();
        }
    },
    deactivated () {
        this.destroyTinymce();
    },
    destroyed () {
        this.destroyTinymce();
    },
    methods: {
        init () {
            // dynamic load tinymce from cdn
            load(tinymceCDN, (err) => {
                if (err) {
                    this.$message.error(err.message);
                    return;
                }
                this.initTinymce();
            });
        },
        initTinymce () {
            const _this = this;
            window.tinymce.init({
                fontsize_formats:
                    "10px 12px 14px 16px 18px 20px 22px 30px 50px", // 第二步
                selector: `#${this.tinymceId}`,
                language: this.languageTypeList["zh"],
                // language_url : "./zh_CN.js" , // 站点绝对 URL 
                font_formats: "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
                height: this.height,
                body_class: "panel-body",
                object_resizing: true,
                toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
                menubar: this.menubar,
                plugins: plugins,
                end_container_on_empty_block: true,
                powerpaste_word_import: "clean",
                code_dialog_height: 450,
                code_dialog_width: 1000,
                advlist_bullet_styles: "square",
                advlist_number_styles: "default",
                imagetools_cors_hosts: ["www.tinymce.com", "codepen.io"],
                default_link_target: "_blank",
                link_title: false,
                nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
                external_plugins: {
                    'powerpaste': `https://hdxt.hdyjy.org.cn/hdjyy-web-admin/powerpaste/plugin.min.js`//${this.baseUrl}
                },
                powerpaste_word_import: 'merge',// 参数:propmt, merge, clear
                powerpaste_html_import: 'merge',// propmt, merge, clear
                powerpaste_allow_local_images: true,//粘贴图片
                // images_upload_handler: function (blobInfo, success, failure) {
                //     // 这个函数主要处理word中的图片，并自动完成上传；
                //     // ajaxUpload是自己定义的一个函数；在回调中，记得调用success函数，传入上传好的图片地址；
                //     // blobInfo.blob() 得到图片的file对象；
                //     // ajaxUpload(blobInfo.blob()).then((data) => {
                //     //     // 上传成功后，调用success函数传入图片地址
                //     //     success(data.uploadedImageUrl)
                //     // })
                // },
                init_instance_callback: (editor) => {
                    if (_this.tinymceVal) {
                        editor.setContent(_this.tinymceVal);
                    }
                    _this.hasInit = true;
                    editor.on("NodeChange Change KeyUp SetContent ", () => {
                        this.hasChange = true;
                        clearTimeout(this.timer);
                        this.timer = setTimeout(() => {
                            let length = editor.getContent({
                                format: "text",
                            }).length;
                            if (length > 15000) {
                                this.$notify({
                                    title: "警告",
                                    message: "富文本输入的内容已超出限制!",
                                    type: "warning",
                                });
                                window.tinymce
                                    .get(this.tinymceId)
                                    .setContent(this.tinymceVal || "");
                            } else {
                                let content = editor.getContent()
                                this.$emit("input", content);
                                // this.dispatch('ElFormItem', 'el.form.input', [content]);
                            }
                        }, 200);
                    });
                },
                setup (editor) {
                    editor.on("FullscreenStateChanged", (e) => {
                        _this.fullscreen = e.state;
                    });
                },
                // it will try to keep these URLs intact
                // https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@convert_urls/
                // https://stackoverflow.com/questions/5196205/disable-tinymce-absolute-to-relative-url-conversions
                convert_urls: false,
                // 整合七牛上传
                images_dataimg_filter (img) {
                    setTimeout(() => {
                        const $image = $(img);
                        $image.removeAttr("width");
                        $image.removeAttr("height");
                        if ($image[0].height && $image[0].width) {
                            $image.attr("data-wscntype", "image");
                            $image.attr("data-wscnh", $image[0].height);
                            $image.attr("data-wscnw", $image[0].width);
                            $image.addClass("wscnph");
                        }
                    }, 0);
                    return img;
                },
                async images_upload_handler (blobInfo, success, failure, progress) {
                    progress(0);
                    const formData = new FormData();
                    formData.append("file", blobInfo.blob());
                    const res = await _this.$api.upload(formData);
                    let url = _this.$showImg(res.result);
                    success(url);
                    progress(100);
                },
            });
        },
        destroyTinymce () {
            const tinymce = window.tinymce.get(this.tinymceId);
            if (this.fullscreen) {
                tinymce.execCommand("mceFullScreen");
            }

            if (tinymce) {
                tinymce.destroy();
            }
        },
        setContent (value) {
            console.log(value);
            window.tinymce.get(this.tinymceId).setContent(value);
        },
        getContent () {
            console.log(window.tinymce.get(this.tinymceId).getContent());
        },

        imageSuccessCBK (arr) {
            console.log(arr);
            const _this = this;
            arr.forEach((v) => {
                window.tinymce
                    .get(_this.tinymceId)
                    .insertContent(`<img class="wscnph" src="${v.url}" >`);
            });
        },
    },
};
</script>

<style scoped>
.tinymce-container {
    position: relative;
    line-height: normal;
}
.tinymce-container >>> .mce-fullscreen {
    z-index: 10000;
}
.tinymce-textarea {
    visibility: hidden;
    z-index: -1;
}
.editor-custom-btn-container {
    position: absolute;
    right: 4px;
    top: 4px;
    /*z-index: 2005;*/
}
.fullscreen .editor-custom-btn-container {
    z-index: 10000;
    position: fixed;
}
.editor-upload-btn {
    display: inline-block;
}
</style>
